<template>
  <div class="container-userecord">
    <el-row>

      <el-form ref="form"
               label-width="80px"
               :model="form">
        <el-col :span="24"
                class="header-box">
          <el-col :span="10">
            <el-form-item label="设备编号">
              <el-input v-model="form.name"
                        placeholder="请输入设备编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            &nbsp;
          </el-col>
          <el-col :span="10">
            <el-form-item label="使用日期">
              <el-date-picker v-model="form.timeArr"
                              type="datetimerange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="onTimeChange">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2"
                  class="header-right">
            <el-form-item>
              <el-button type="primary"
                         @click="onSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-table :data="tableData"
                    :header-cell-style="{background:'#f5f5f5'}"
                    border
                    height="650"
                    style="width: 100%">
            <el-table-column prop="oper_date"
                             align="center"
                             show-overflow-tooltip
                             label="使用日期"
                             width="180">
            </el-table-column>
            <el-table-column prop="oper_user_name"
                             align="center"
                             show-overflow-tooltip
                             label="使用人员"
                             width="180">
            </el-table-column>
            <el-table-column prop="project_name"
                             align="center"
                             show-overflow-tooltip
                             label="项目名称">
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24"
                class="footer-box">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="page"
                         background
                         :page-sizes="[10,20,30,40,50,100]"
                         :page-size="page_size"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { readerApi } from '@/services/SystemSetting'
export default {
  data () {
    return {
      page: 1,
      page_size: 10,
      total: 0,
      todos: '',
      currentPage: 1,
      form: {
        name: '',
        timeArr: [],
      },
      startTime: '',
      endTime: '',
      tableData: [],

    }
  },
  methods: {
    onTimeChange (val) {
      if (val == null) {
        this.startTime = '';
        this.endTime = '';
      } else {
        this.startTime = val[0];
        this.endTime = val[1];
      }
      // console.log('时间改变时触发', val, this.startTime, this.endTime)
    },
    //点击“查询”触发的事件
    onSearch () {
      this.page = 1;
      this.getUseRecord();
    },
    //触发“使用记录”事件
    onUseRecord (row) {
    },
    //第页条数触发事件
    handleSizeChange (val) {
      this.page = 1;
      this.page_size = val;
      this.getUseRecord();
    },
    //点击页码时触发的事件
    handleCurrentChange (val) {
      this.page = val;
      this.getUseRecord();
    },
    getUseRecord () {
      readerApi.getGpsBind({
        params: {
          reader_no: this.form.name,
          blue_tooth_reader_id: this.$route.query.bluetooth_reader_id,
          created_at_greater: this.startTime,
          created_at_less: this.endTime,
          page: this.page,
          per_page: this.page_size
        }
      }).then((res) => {
        this.tableData = res.data.data;
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    this.getUseRecord();
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-range-editor .el-range-input {
  padding-top: -3px !important;
  height: 30px !important;
  // line-height: 30px !important;
}
.footer-box {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.container-userecord {
  padding: 20px;
  background: white;
}
/deep/.el-date-editor {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 100% !important;
}
.header-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.header-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>
